<template>
    <div>
        <NyaReadonlyInput v-show="this.$route.path !== '/'"
                          :val="currentPath"
                          :copy-icon="true">
        </NyaReadonlyInput>

        <nya-panel v-show="this.$route.path !== '/'">
            <div id="tool_visit_count"/>
        </nya-panel>

        <nya-panel
            title="神奇工具箱"
            text="一个神奇的百宝箱，收集各路直接在本地浏览器实现全功能的小工具，安全无风险，还支持离线使用哦，欢迎品鉴">
            <div class="form-control" style="border: 0">
                @一灰灰 &nbsp;
                <a href="mailto:bangzewu@126.com" style="text-decoration: none;"><i class="eva eva-email-outline"/></a>
                <a href="https://github.com/liuyueyi/quick-tools" target="_blank"><i
                    class="eva eva-github-outline"/></a>
            </div>
        </nya-panel>


        <nya-panel title="快捷导航" v-show="!this.$store.state.setting.hideQuickLink"
                   :sub-title="this.favorites && this.favorites.length > 0 ? '' : '收藏的工具栏可以显示在这里哦~'">
            <template v-for="(tool, index2) in this.favorites" v-show="this.favorites">
                <nya-link
                    :to="tool.path"
                    class="quick-link">
                    {{ tool.name }}
                </nya-link>
            </template>
        </nya-panel>


        <nya-panel head="公告" v-if="!$store.state.setting.hideNotice">
            <ul class="nya-list">
                <li>本项目基于 <a href="https://github.com/liuyueyi/quick-tools" target="_blank" rel="noopener noreferrer">QuickTools</a>
                    构建而成
                </li>
                <li>
                    首页组件展示可到设置页面调整哦
                </li>
                <li>
                    对于常用的工具，加入收藏之后可再收藏页面直接查看
                </li>
                <li><b>欢迎将本站收藏到收藏夹，以便以后使用</b></li>
                <li>
                    本站域名：<a
                    :href="$store.state.env.url"
                    target="_blank"
                    rel="noopener noreferrer"
                >{{ $store.state.env.domain }}</a>
                </li>
                <li>
                    友链：
                    <nya-link :to="`/links`">维护人员 & 引用技术栈</nya-link>
                </li>
                <li v-if="$store.state.isMobile.any">
                    如果遇到无法使用或者样式问题，请更换浏览器后重试，推荐使用 Chrome 浏览器，对 iOS 设备兼容性可能不太好
                </li>
                <li>
                    重在参与：
                    <a href="https://github.com/liuyueyi/quick-tools/issues/new/choose">贡献idea</a>
                    <a href="https://github.com/liuyueyi/quick-tools/issues/new/choose">找BUG</a>
                </li>
            </ul>
        </nya-panel>

        <nya-panel head="请作者喝一杯咖啡？" v-if="!$store.state.setting.hidePay" class="text-center"
                   :sub-title="this.showOnePayQrcode ? '聚合收款码': '打赏码'">
            <button class="nya-btn " @click="updateShowPayWay">切换</button>
            <div class="text-center" v-if="this.showOnePayQrcode">
                <img
                    src="">
            </div>
            <div v-else class="text-center">
                <div>
                    <div class="name">微信</div>
                    <img src="/imgs/weixin.jpg" alt="weixin">
                </div>
                <div>
                    <div class="name">小程序</div>
                    <img src="/imgs/wxpay.jpg" alt="weixin">
                </div>
                <div>
                    <div class="name">支付宝</div>
                    <img src="/imgs/alipay.jpg" alt="alipay">
                </div>
                <div>
                    <div class="name">QQ</div>
                    <img src="/imgs/qq.jpg" alt="qq">
                </div>
            </div>
        </nya-panel>

        <no-ssr>
            <!-- 谷歌广告不采用服务器渲染 -->
            <div class="nya-container">
                <script async
                        src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5592000528061748"
                        crossorigin="anonymous"></script>
                <!-- quick-tool-sidebar-ads -->
                <ins class="adsbygoogle"
                     style="display:block"
                     data-ad-client="ca-pub-5592000528061748"
                     data-ad-slot="5535461110"
                     data-ad-format="auto"
                     data-full-width-responsive="true"></ins>
                <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
            </div>
        </no-ssr>
    </div>
</template>

<script>
import NyaPanel from "./UI/nya-panel";
import NyaReadonlyInput from "./UI/nya-readonly-input";
import isMobile from 'ismobilejs';
import Template from "../pages/tools/code/cdnjs";

export default {
    name: 'Panel',
    components: {Template, NyaPanel, NyaReadonlyInput},
    props: {
        showOnePayQrcode: {
            type: Boolean,
            default: true,
        },
    },
    watch: {
        '$route'() {
            // 解决页面跳转之后，sidebar不更新的问题
            this.currentPath = process.env.url + this.$route.fullPath;
        }
    },
    data() {
        return {
            currentPath: process.env.url + this.$route.fullPath,
            isMobile
        }
    },
    methods: {
        updateShowPayWay() {
            this.showOnePayQrcode = !this.showOnePayQrcode;
        }
    },
    computed: {
        toolsList() {
            let arr = [];
            this.$store.state.tools.forEach(tool => {
                tool.list.forEach(item => {
                    item['category'] = tool['title'];
                    item['tab'] = tool['tab'];
                });
                arr = arr.concat(tool.list);
            });
            return arr;
        },
        favorites() {
            let results = [];
            this.toolsList.forEach(tool => {
                if (
                    this.$store.state.setting.favorites.indexOf(tool.path) !==
                    -1
                )
                    results.push(tool);
            });
            return results;
        }
    }
};
</script>

<style lang="scss">
.quick-link {
    display: inline-block;
    font-size: 0.8em;
    padding: 2px;
    margin: 2px;
    cursor: pointer;
    outline: none;
    border: 1px solid var(--border-color);
    background-color: rgba($color: var(--theme), $alpha: .1);
    color: var(--t1);
    transition: border-color .2s ease, color .2s ease;
    letter-spacing: 1px;
}
</style>
